<template>
  <div>
    <Title>首页</Title>
    <NuxtLayout name="header" />
    <h2>{{ msg }}</h2>
    <h3>当前时间为：{{ time }}</h3>
    <h4>当前的数字为：{{ countStore.count }}</h4>
    <h5>{{ text }}</h5>
    <a-space>
      <a-button type="primary" @click="countStore.increment">加1</a-button>
      <a-button type="primary" @click="countStore.decrement">减1</a-button>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { useCountStore } from '~/stores/useCountStore'

const { locale } = useI18n()
const dayjs = useDayjs()
const countStore = useCountStore()
const msg = 'Hello Nuxt.js3!'
const time = ref('')
const timer = ref<any>(null)
const text = useToUpper('hello nuxt.js3')

function getTime() {
  time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}
getTime()
timer.value = setInterval(() => {
  getTime()
}, 1000)

onMounted(() => {
  window.onresize = useDebounce(() => {
    console.log('resize')
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(timer.value)
})
</script>

<style scoped lang="less">
  h2 {
    color: @primary-color;
  }
</style>
